<!DOCTYPE html>
<html>
<head>
    <title>接口文档</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/vue.min.js" type="text/javascript"></script>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
<div id="app" v-cloak>
    <div class="side">
        <ul>
            <li v-for="(item,index) in list" @click="onSelect(item)">
                <a href="javascript:;" :class="{'select':item.id==select.id}">
                    <span v-if="item.type == 'api'" style="color: #3a8ee6">[A]</span>
                    <span v-if="item.type == 'ajax'" style="color: #3a8ee6">[H]</span>
                    <span>{{item.title}}</span>
                </a>
            </li>
        </ul>
    </div>

    <div class="search">
        <input class="search-key" v-model="searchKey" placeholder="搜索关键字...">

        <p>
            <input class="search-type" type="checkbox" id="ajax" name="type" v-model="ajax"
                   checked>
            <label for="ajax">AJAX</label>
            <input class="search-type"  type="checkbox" id="api" name="type" v-model="api"
                   checked>
            <label for="api">API</label>
        </p>
    </div>

    <div class="body">
        <div class="api" v-if="select.title">
            <h3>{{select.title}}</h3>
            <h5>请求参数</h5>

            <div class="wrapper">
                <table>
                    <tr>
                        <th width="200">参数</th>
                        <th width="100">类型</th>
                        <th width="100">必需</th>
                        <th>说明</th>
                    </tr>
                    <tr v-for="p in select.reqParams">
                        <td>{{p.name}}</td>
                        <td><a :href="'#'+p.type">{{p.type}}</a></td>
                        <td v-if="p.required && p.name" style="color: red">是</td>
                        <td v-if="!p.required && p.name">否</td>
                        <td>{{p.note}}</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>

            <h5>响应参数</h5>

            <div class="wrapper">
                <table>
                    <tr>
                        <th width="200">参数</th>
                        <th width="100">类型</th>
                        <th>说明</th>
                    </tr>
                    <tr v-for="p in select.rspParams">
                        <td>{{p.name}}</td>
                        <td><a :href="'#'+p.type">{{p.type}}</a></td>
                        <td>{{p.note}}</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>

            <h5>调试实例</h5>

            <div class="wrapper" v-if="select.type == 'ajax'">
                <pre>new Ajax("{{select.module}}", "{{select.target}}", "{{select.method}}").post({}, function (response) {</pre>
                <pre>    if (response.errors.length > 0) {</pre>
                <pre>        nav.e(response.errors[0].message);</pre>
                <pre>    } else {</pre>
                <pre>        nav.i("Ajax调用成功!");</pre>
                <pre>    }</pre>
                <pre>}.bind(this))</pre>
            </div>

            <div class="wrapper" v-if="select.type == 'api'">
                <pre>ApiClient client = ApiClient.getInstance();</pre>
                <pre>DictFindRequest request = new DictFindRequest();</pre>
                <pre v-if="select.method.indexOf('find') !== -1">request.setPageNumber(1);</pre>
                <pre v-if="select.method.indexOf('find') !== -1">request.setPageSize(10);</pre>
                <pre v-if="select.method.indexOf('find') !== -1">request.setSortKey("CREATE_TIME");</pre>
                <pre v-if="select.method.indexOf('find') !== -1">request.setSortType(SortType.DESC);</pre>
                <pre>DictFindResponse response = client.execute(request);</pre>
                <pre>Assert.assertTrue(!response.hasError());</pre>
            </div>

            <template v-for="item in select.entList">
                <h5 :id="item.name">附录参数(<span class="object">{{item.name}}</span>)</h5>

                <div class="wrapper" >
                    <table>
                        <tr>
                            <th width="200">参数</th>
                            <th width="100">类型</th>
                            <th>说明</th>
                        </tr>
                        <tr v-for="p in item.entParams">
                            <td>{{p.name}}</td>
                            <td><a :href="'#'+p.type">{{p.type}}</a></td>
                            <td>{{p.note}}</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
            </template>
        </div>
    </div>
</div>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>